<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue检测数据更新的原理</title>
</head>
<body>
<script type="text/javascript">
    //模拟vue检测对象属性
    let data = {a: 1, b: 2, c: 3}//程序员传入的data
    let _data = {}//vue收集到的
    let vm = {}//vm
    //如下三个行为完成了从data----->_data
    Object.defineProperty(_data, "a", {
        get() {
            return data.a
        },
        set(value) {
            console.log('有人修改a了')
            data.a = value
        }
    })
    Object.defineProperty(_data, "b", {
        get() {
            return data.b
        },
        set(value) {
            console.log('有人修改了b的值')
            data.b = value
        }
    })
    Object.defineProperty(_data, "c", {
        get() {
            return data.c
        },
        set(v) {
            console.log('有人修改c了')
            data.c=v
        }
    })
//如下三个行为 完成从_data---->vm
    Object.defineProperty(vm,"a",{
        get() {
            return _data.a
        },
        set(v) {
            console.log('有人修改a了')
            _data.a=v
        }
    })
    Object.defineProperty(vm,"b",{
        get() {
            return _data.b
        },
        set(v) {
            console.log('有人修改b了')
            _data.b=v
        }
    })
    Object.defineProperty(vm,"c",{
        get() {
            return _data.c
        },
        set(v) {
            console.log('有人修改c了')
           _data.c=v
        }
    })

</script>
</body>
</html>